import { Button } from '@/components/ui/Button';
import { Github } from 'lucide-react';

export const About = () => {
  return (
    <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <div className="text-center">
        <h1 className="text-4xl font-bold text-gray-900">
          About Our Project
        </h1>
        <p className="mt-4 text-lg text-gray-500 max-w-2xl mx-auto">
          This is a modern React application built with Vite, TypeScript, and other cutting-edge technologies. 
          It features a robust architecture with state management using Jotai and routing with React Router.
        </p>
        
        <div className="mt-8">
          <h2 className="text-2xl font-semibold text-gray-800">Tech Stack</h2>
          <div className="mt-4 grid grid-cols-2 gap-4 max-w-lg mx-auto">
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="font-medium text-gray-900">Frontend</h3>
              <ul className="mt-2 text-sm text-gray-500">
                <li>React 18</li>
                <li>TypeScript</li>
                <li>Tailwind CSS</li>
              </ul>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="font-medium text-gray-900">Tools</h3>
              <ul className="mt-2 text-sm text-gray-500">
                <li>Vite</li>
                <li>Jotai</li>
                <li>React Router</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};